<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    什么是生命周期：
      指一个组件从创建到销毁的这个过程，就是一个生命周期。

    什么是生命周期钩子函数：
      在一个生命周期中特定的时机会自动执行的函数就叫做生命周期钩子函数。【10个  8 + 2】

      创建阶段，一次
      1. beforeCreate   创建之前
      2. created        创建完成

      挂载阶段，一次
      3. beforeMount    挂载之前
      4. mounted        挂载完成

      更新阶段，多次
      5. beforeUpdate   更新之前
      6. updated        更新完成

      卸载阶段，一次
      7. beforeUnmount  卸载之前      Vue2 - beforeDestroy
      8. unmounted      卸载完成      Vue2 - destroyed


   -->

    <div id="app">
      <h1>生命周期</h1>
      <p id="myP">Msg: {{ msg }}</p>

      <button @click="msg += '~'">点我</button>
    </div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      const app = new Vue({
        data() {
          return {
            msg: "Hello",
          };
        },

        computed: {
          reverseMsg() {
            return this.msg.split("").reverse().join("");
          },
        },

        methods: {
          fn1() {},
        },

        /**
         * 创建之前
         *
         *    使用场景：
         *        1. 初始化数据【很少用上】
         *    注意事项：
         *        1. 这个函数时，Vue内部还没开始做数据代理的工作，于是这里获取不到代理数据
         */
        // beforeCreate() {
        //   console.log("beforeCreate");

        //   console.log("msg", this.msg);
        //   console.log("fn1", this.fn1);
        //   console.log("reverseMsg", this.reverseMsg);
        // },

        /**
         * 创建完成，数据代理的工作也完成了之后，触发
         *
         *    使用场景：
         *        1. 数据获取
         *    注意事项：
         *        1. 获取不了真实的DOM数据, 一定要等到挂载完成（mounted）
         */
        // created() {
        //   console.log("created");

        //   console.log("msg", this.msg);
        //   console.log("fn1", this.fn1);
        //   console.log("reverseMsg", this.reverseMsg);

        //   // console.log("#app", document.querySelector("#app").innerHTML);
        //   // console.log(document.querySelector('#myP').innerHTML) // Msg: {{ msg }}
        // },

        /**
         *  挂载之前
         *    使用场景：无
         *    注意事项：
         *        1. 也是获取不到真实DOM数据的
         */
        // beforeMount() {
        //   console.log("beforeMount");
        //   console.log("#app", document.querySelector("#app").innerHTML);
        // },

        /**
         * 挂载完成
         *    使用场景：
         *        1. 获取数据
         *        2. 全局事件的监听，比如 全局 scroll, 全局 点击。等等
         *        3. 消息订阅
         *        4. 定时器or延时器
         *    特点：
         *        1. 这时可以获取到真实的DOM数据了
         */
        // mounted() {
        //   console.log("mounted");

        //   console.log(document.querySelector("#myP").innerHTML); // Msg: Hello
        // },

        /**
         * 更新之前：
         *    只要数据发送变化，就会触发，但这时还没有映射最新的DOM到页面
         */
        // beforeUpdate() {
        //   console.log("beforeUpdate");
        //   console.log(document.querySelector("#myP").innerHTML);
        // },

        // /**
        //  * 更新完成：
        //  *    这时可以获取到最新的DOM数据了。
        //  *
        //  *    注意事项：
        //  *      1. 不要修改数据【除非带有条件】
        //  *      2. 获取数据【除非带有条件】
        //  */
        // updated() {
        //   console.log("updated");
        //   console.log(document.querySelector("#myP").innerHTML);

        //   // this.msg += '~'
        // },

        /**
         * 卸载之前
         *    使用场景：做一些收尾清理工作
         *        1. 取消全局的事件监听
         *        2. 取消计时器（setInterval）
         *        3. 取消消息订阅
         *    注意事项：
         *        修改不了数据，数据已经关闭响应式
         */
        beforeDestroy() {
          console.log("beforeUnmount");
        },

        /**
         * 卸载完成
         *    使用场景：做一些收尾清理工作
         *        1. 取消全局的事件监听
         *        2. 取消计时器（setInterval）
         *        3. 取消消息订阅
         *
         *    注意事项：
         *        修改不了数据，数据已经关闭响应式
         */
        destroyed() {
          console.log("unmounted");
        },
      });

      app.$mount("#app");

      setTimeout(() => {
        // Vue3 app 是应用实例，调用 unmount 来卸载
        // app.unmount();

        // Vue2 app 是根组件实例，调用 $destroy 来销毁
        app.$destroy();
      }, 3000);
    </script>
  </body>
</html>
